<template>
  <div>
    <div style="height: 600px; overflow-y: auto">
      <el-form ref="form" :model="form" :rules="rules" label-width="150px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="档案门类" prop="categoryId">
              <treeselect v-model="form.categoryId" :options="deptOptions"  clearable style="width: 90%" @select="changeSelectTap($event)" :disabled="isDisabled"
                          placeholder="请选择档案门类" :disable-branch-nodes="true" noResultsText="暂无数据" :normalizer="normalizer"  />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="日期" prop="startTime">
              <el-date-picker v-model="dateRange" style="width: 90%" value-format="yyyy-MM-dd" type="daterange" @change="onChangeTap" :disabled="isDisabled"
                              range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="全宗" prop="fondsName">
              <div style="display: flex; flex-wrap: wrap-reverse;">
                <el-checkbox :indeterminate="fondsIndeterminate" style="margin-right: 20px;" v-model="fondsCheckAll" @change="fondsAllChange" :disabled="isDisabled">全选</el-checkbox>
                <el-checkbox-group v-model="fondsSelection" style="width: 90%;" @change="fondsChange" :disabled="isDisabled">
                  <el-checkbox v-for="option in fondsOption" :key="option.value" :label="option">{{ option.label }}</el-checkbox>
                </el-checkbox-group>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="保管期限" prop="bgqx">
              <div style="display: flex; flex-wrap: wrap-reverse;">
                <el-checkbox :indeterminate="bgqxIndeterminate" style="margin-right: 20px;" v-model="bgqxCheckAll" @change="bgqxAllChange" :disabled="isDisabled">全选</el-checkbox>
                <el-checkbox-group v-model="bgqxSelection" style="width: 90%;" @change="bgqxChange" :disabled="isDisabled">
                  <el-checkbox v-for="option in dict.type.BGQX" :key="option.value" :label="option">{{ option.label }}</el-checkbox>
                </el-checkbox-group>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="密级" prop="mj">
              <div style="display: flex; flex-wrap: wrap-reverse;">
                <el-checkbox :indeterminate="mjIndeterminate" style="margin-right: 20px;" v-model="mjCheckAll" @change="mjAllChange" :disabled="isDisabled">全选</el-checkbox>
                <el-checkbox-group v-model="mjSelection" style="width: 90%;" @change="mjChange" :disabled="isDisabled">
                  <el-checkbox v-for="option in dict.type.MJ" :key="option.value" :label="option">{{ option.label }}</el-checkbox>
                </el-checkbox-group>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div style="text-align: center; margin-top:20px">
      <el-button type="primary" @click="nextStepTap(0)">下一步</el-button>
    </div>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {addZpgz, getZpgzDetail, listGROUPTree, updateZpgz} from "@/api/archive/filesManage/diskManageMenu";
import {getFondsByTenantCode} from "@/api/archive/archiveTreeDefinition";

export default {
  name: "zpRuleEdit",
  props: ['title', 'open', 'fondsOption'],
  archive_Dicts: ['BGQX', 'MJ'],
  components: { Treeselect },
  data() {
    return {
      form: {
        categoryId: undefined,
        categoryName: undefined,
        startTime: undefined,
        endTime: undefined,
        fondsName: undefined,
        bgqx: undefined,
        mj: undefined
      },
      dateRange: [],
      rules: {
        categoryId: [
          { required: true, message: "请选择档案门类" },
        ],
        startTime: [
          { required: true, message: "请选择年度" },
        ],
        fondsName: [
          { required: true, message: "请选择全宗", trigger: 'blur' },
        ],
        bgqx: [
          { required: true, message: "请选择保管期限", trigger: 'blur' },
        ],
        mj: [
          { required: true, message: "请选择密级", trigger: 'blur' },
        ],
      },
      deptOptions: [],
      // 全宗
      fondsIndeterminate: false,
      fondsCheckAll: false,
      fondsSelection: [],
      // 保管期限
      bgqxIndeterminate: false,
      bgqxCheckAll: false,
      bgqxSelection: [],
      // 密级
      mjIndeterminate: false,
      mjCheckAll: false,
      mjSelection: [],
      isDisabled: false,
    }
  },
  methods: {

  
    init(pggId, isDisabled) {
      console.log(isDisabled == true, '==========')
      if (isDisabled == true) {
        this.isDisabled = true
      } else {
        this.isDisabled = false
      }
      this.reset()
      // 门类列表
      this.getDeptTree();
      this.form.pggId = pggId
      getZpgzDetail(pggId).then(response=>{
        if (response.data != undefined) {
          this.form = response.data
          this.$set(this, 'dateRange', [this.form.startTime,  this.form.endTime])
          // 全宗回显
          var fondsArr = response.data.fondsCode.split(',')
          var arr = []
          for (let i = 0; i < fondsArr.length; i++) {
            const data = this.fondsOption.filter(item => item.value == fondsArr[i])
            arr = arr.concat(data)
          }
          this.fondsSelection = arr
          let checkedCount = fondsArr.length;
          this.fondsCheckAll = checkedCount === this.fondsOption.length;
          this.fondsIndeterminate = checkedCount > 0 && checkedCount < this.fondsOption.length;

          // 保管期限回显
          var bgqxArr = response.data.bgqx.split(',')
          var arr1 = []
          for (let i = 0; i < bgqxArr.length; i++) {
            const data = this.dict.type.BGQX.filter(item => item.value == bgqxArr[i])
            arr1 = arr1.concat(data)
          }
          this.bgqxSelection = arr1
          let checkedCount1 = bgqxArr.length;
          this.bgqxCheckAll = checkedCount1 === this.dict.type.BGQX.length;
          this.bgqxIndeterminate = checkedCount1 > 0 && checkedCount1 < this.dict.type.BGQX.length;

          // 密级回显
          var mjArr = response.data.mj.split(',')
          var arr2 = []
          for (let i = 0; i < mjArr.length; i++) {
            const data = this.dict.type.MJ.filter(item => item.value == mjArr[i])
            arr2 = arr2.concat(data)
          }
          this.mjSelection = arr2
          let checkedCount2 = mjArr.length;
          this.mjCheckAll = checkedCount2 === this.dict.type.MJ.length;
          this.mjIndeterminate = checkedCount2 > 0 && checkedCount2 < this.dict.type.MJ.length;
        }
      })
    },
    reset() {
      // this.isDisabled = false
      this.form = {
        categoryId: undefined,
        categoryName: undefined,
        startTime: undefined,
        endTime: undefined,
        fondsName: undefined,
        bgqx: undefined,
        mj: undefined,
        pggId: undefined
      }
      this.resetForm('form')
      this.dateRange = []
      this.fondsIndeterminate = false
      this.fondsCheckAll = false
      this.fondsSelection = []

      this.bgqxIndeterminate = false
      this.bgqxCheckAll = false
      this.bgqxSelection = []

      this.mjIndeterminate = false
      this.mjCheckAll = false
      this.mjSelection = []
    },
    // 获取档案门类树
    getDeptTree() {
      listGROUPTree().then(response => {
        this.deptOptions = response.data;
      })
    },
    // 获取全宗数据
    generalArchive() {
      getFondsByTenantCode().then(response => {
        this.fondsOption = response.data.map(option => {
          return {
            value: option.fondsCode,
            label: option.fondsName
          }
        })
      })
    },
    // 档案门类
    changeSelectTap(val) {
      this.form.categoryName = val.label
    },
    // 只能选择数据下面有children 的数据，没有children的时候禁用
    normalizer(node) {
            if (node.nodeType == 'fonds') {
                if (node.children == undefined||node.children == null||!node.children.length) {
                   
                    node['isDisabled'] = true;
                }

            }
            if (node.children == null || node.children == undefined || !node.children.length) {
                delete node.children;
            }
            return node
        },
    // 年度
    onChangeTap(val) {
      if (this.dateRange != null) {
        if (this.dateRange.length != 0) {
          this.form.startTime = this.dateRange[0]
          this.form.endTime = this.dateRange[1]
        }
      }
    },
    // 全宗勾选
    fondsAllChange(val) {
      this.fondsSelection = val ? this.fondsOption : [];
      this.fondsIndeterminate = false;
      this.form.fondsName = this.fondsOption.map(item=>item.label).toString()
      this.form.fondsCode = this.fondsOption.map(item=>item.value).toString()
    },
    fondsChange(value) {
      let checkedCount = value.length;
      this.fondsCheckAll = checkedCount === this.fondsOption.length;
      this.fondsIndeterminate = checkedCount > 0 && checkedCount < this.fondsOption.length;
      this.form.fondsCode = value.map(item=>item.value).toString()
      this.form.fondsName = value.map(item=>item.label).toString()
    },
    // 保管期限勾选
    bgqxAllChange(val) {
      this.bgqxSelection = val ? this.dict.type.BGQX : [];
      this.bgqxIndeterminate = false;
      this.form.bgqx = this.dict.type.BGQX.map(item=>item.value).toString()
    },
    bgqxChange(value) {
      let checkedCount = value.length;
      this.bgqxCheckAll = checkedCount === this.dict.type.BGQX.length;
      this.bgqxIndeterminate = checkedCount > 0 && checkedCount < this.dict.type.BGQX.length;
      this.form.bgqx = value.map(item=>item.value).toString()
    },
    // 密级勾选
    mjAllChange(val) {
      this.mjSelection = val ? this.dict.type.MJ : [];
      this.mjIndeterminate = false;
      this.form.mj = this.dict.type.MJ.map(item=>item.value).toString()
    },
    mjChange(value) {
      let checkedCount = value.length;
      this.mjCheckAll = checkedCount === this.dict.type.MJ.length;
      this.mjIndeterminate = checkedCount > 0 && checkedCount < this.dict.type.MJ.length;
      this.form.mj = value.map(item=>item.value).toString()
    },
    nextStepTap(e) {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.$emit('nextStepTap', e, this.form)
        }
      })
    },
    closeDelDialog() {
      this.$emit("closeDelDialog")
      this.reset()
    }
  }
}
</script>

<style scoped>

</style>
